<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>EppiStor</title>

  <link rel="stylesheet" href="/css/smoothness/jquery-ui-1.8.21.custom.css" />
  <link rel="stylesheet" href="/css/main.css" />

  <link rel="shortcut icon" href="/favicon.ico" />

  <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/js/jquery-ui-1.8.21.custom.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $("[name='container_name_form']").hide();
      $("[name='container_description_form']").hide();

      $("[name='container_name_form'] button").button();
      $("[name='container_name_form'] button.cancel").click(function() {
        toggleContainerForm('name', false);
        return false;
      });
      $("[name='container_name_form'] button.save").click(function() {
        // TODO: implement
        return false;
      });


      $("[name='container_description_form'] button").button();
      $("[name='container_description_form'] button.cancel").click(function() {
        toggleContainerForm('description', false);
        return false;
      });
      $("[name='container_description_form'] button.save").click(function() {
        // TODO: implement
        return false;
      });

      var cjson = {
        "key": "123",
        "name": "Container 1",
        "description": "Container 1 description",
        "size_x": 8,
        "size_y": 8,
        "content": {
          "1_1": {
            "name": "1 1",
            "description": "vial 1",
          },
        }
      };

       $("#container_name_value").text(cjson["name"]);
       $("[name='container_name_form'] [name='name']").val(cjson["name"]);
       $("#container_description_value").text(cjson["description"]);
       $("[name='container_description_form'] [name='description']").val(cjson["description"]);
       var table=$("<table>");
       table.addClass("container");
       var tbody=$("<tbody>");
       for (var r = 0; r <= cjson["size_y"]; r++) {
         var trow = $("<tr>");
         for (var c = 0; c <= cjson["size_x"]; c++) {
           var cellText = cjson["content"][c + "_" + r];
           cellText = cellText != null ? cellText["name"] : "";
           if (r == 0) {
             cellText = c > 0 ? "" + c : "";
           }
           if (c == 0) {
             cellText = r > 0 ? "" + r : "";
           }
           $("<td>").addClass(c > 0 && r > 0 ? "vial" : "label")
             .text(cellText)
             .appendTo(trow);
         }
         trow.appendTo(tbody);
       }

       tbody.appendTo(table);
       table.appendTo($("#container_content"));
    });

    function toggleContainerForm(name, showOrHide) {
      $("#container_" + name + "_value").toggle(!showOrHide);
      $("#container_" + name + "_value ~ .control").toggle(!showOrHide);
      $("[name='container_" + name + "_form']").toggle(showOrHide);
    }

    function editContainerName() {
      toggleContainerForm("name", true);
    }

    function editContainerDescription() {
      toggleContainerForm("description", true);
    }
  </script>
</head>
<body>
</body>
  <div id="container_name">
    <form name="container_name_form" action="/container" method="POST">
      <input type="hidden" name="action" value="update_name" />
      <input type="text" name="name" />
      <button class="save">Save</button>
      <button class="cancel">Cancel</button>
    </form>
    <span id="container_name_value"></span>&nbsp;
    <a class="control" href="#" onclick="toggleContainerForm('name', true); return false;">edit</a>
  </div>

  <div id="container_description">
    <form name="container_description_form" action="/container" method="POST">
      <input type="hidden" name="action" value="update_description" />
      <textarea name="description"></textarea>
      <br/>
      <button class="save">Save</button>
      <button class="cancel">Cancel</button>
    </form>

    <span id="container_description_value"></span>&nbsp;
    <a class="control" href="#" onclick="toggleContainerForm('description', true); return false;">edit</a>
  </div>

  <div id="container_content"></div>

  <a href="/">Back</a>
</html>
